<!doctype html>
<head>
    <title>SymboLayer3D example</title>
    <script src="../dist/threebox.js" type="text/javascript"></script>
    <!-- <script src="config.js"></script> -->

    <link rel="stylesheet" href="http://minedata.cn/minemapapi/v1.2/minemap.css">
    <script src="http://minedata.cn/minemapapi/v1.2/minemap.js"></script>
    <style>
        body, html { 
            width: 100%;
            height: 100%;
            margin: 0;
        }
        #map { 
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div id='map' class='map'></div>

    <script>
        minemap.accessToken = '0b871b483cfb42a7b0dd73b5f78792e8';
        minemap.solution = 66;
        var map = new minemap.Map({
            container: 'map',
            style: 'http://minedata.cn/service/solu/style/id/66',
            center: [116.42338210344315,39.795887837230445],
            zoom: 15.95,
            pitch: 60,
            heading: 41,
            maxZoom: 24
        });

    map.on("load", function() {
        // Initialize threebox
        window.threebox = new Threebox(map);
        threebox.setupDefaultLights();

        var source = {
            type: "FeatureCollection",
            features: [
            {
                type: "Feature",
                properties: { model: "orientation_0_0" },
                geometry: {
                    type: "Point",
                    coordinates: [0,0]
                }
            },
            {
                type: "Feature",
                properties: { model: "orientation_-30_-30" },
                geometry: {
                    type: "Point",
                    coordinates: [-30,-30]
                }
            },
            {
                type: "Feature",
                properties: { model: "orientation_-30_0" },
                geometry: {
                    type: "Point",
                    coordinates: [-30,0]
                }
            },
            {
                type: "Feature",
                properties: { model: "orientation_0_30" },
                geometry: {
                    type: "Point",
                    coordinates: [0,30]
                }
            },
            {
                type: "Feature",
                properties: { model: "orientation_30_30" },
                geometry: {
                    type: "Point",
                    coordinates: [30,30]
                }
            },
            
            ]
        };

        var symbols = threebox.addSymbolLayer({
            id:             "scale",
            source:         source, // You can also specify a URL or relative path such as "data/points.geojson",
            modelName:      {property: 'model'},    // will look for an .obj and .mtl file with this name
            modelDirectory: "models/",          // in this directory
            rotation:       { generator: feature => (new THREE.Euler(0,0,0, "ZXY")) },
            scale:          [100000,100000,100000],
            scaleWithMapProjection: true
        });

        console.log(symbols);
    });

    </script>
</body>